<template>
  <div id="app">
    <div v-if="this.pageIndex===1" :key="1">
      <div style="text-align: left;height: 50px;margin-top: 20px;">
        <el-form :inline="true" :model="queryParam" size="medium">
          <el-form-item label="总数">
            <el-switch
                @change="queryUsers()"
                v-model="queryParam.isCount"
                active-color="#13ce66"
                inactive-color="#ff4949">
            </el-switch>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="changePageIndex(2)">企业数据</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="exportUsers(1)">导出EXCEL</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div style="margin-top: 20px;">
        <el-table v-loading="listLoading"
                  :data="result.list"
                  border
                  :header-cell-style="headClass"
                  :cell-style="rowClass"
                  style="width: 100%">
          <el-table-column
              prop="seekerId"
              label="用户id"
              width="120">
          </el-table-column>
          <el-table-column
              prop="seekerName"
              label="用户名"
              width="180">
          </el-table-column>
          <el-table-column
              prop="sex"
              label="性别"
              width="180">
            <template slot-scope="scope">
              <div v-if="scope.row.sex===0">
                <span>男</span>
              </div>
              <div v-if="scope.row.sex===1">
                <span>女</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
              prop="phone"
              label="电话"
              width="180">
          </el-table-column>
          <el-table-column
              prop="email"
              label="邮箱"
              width="180">
          </el-table-column>
          <el-table-column
              prop="createdTime"
              label="创建时间">
            <template slot-scope="scope">
              <span>{{ dateFormat(scope.row.createdTime) }}<br></span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div v-if="this.pageIndex===2" :key="2">
      <div style="text-align: left;height: 50px;margin-top: 20px;">
        <el-form :inline="true" :model="queryParam" size="medium">
          <el-form-item label="总数">
            <el-switch
                @change="queryUsers()"
                v-model="queryParam.isCount"
                active-color="#13ce66"
                inactive-color="#ff4949">
            </el-switch>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="changePageIndex(1)">求职者数据</el-button>
          </el-form-item>
          <el-form-item>
            <a id="linkUrl" @click="exportUsers(2)" title="下载">
              <el-button type="success" @click="exportUsers(2)">导出EXCEL</el-button>
            </a>
          </el-form-item>
        </el-form>
      </div>
      <div style="margin-top: 20px;">
        <el-table v-loading="listLoading"
                  :data="result.list"
                  border
                  :header-cell-style="headClass"
                  :cell-style="rowClass"
                  style="width: 100%">
          <el-table-column
              prop="companyId"
              label="用户id"
              width="120">
          </el-table-column>
          <el-table-column
              prop="companyName"
              label="用户名"
              width="180">
          </el-table-column>
          <el-table-column
              prop="companySize"
              label="企业规模"
              width="180">
          </el-table-column>
          <el-table-column
              prop="profession"
              label="行业"
              width="180">
          </el-table-column>
          <el-table-column
              prop="createdTime"
              label="创建时间">
            <template slot-scope="scope">
              <span>{{ dateFormat(scope.row.createdTime) }}<br></span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 底栏容器 -->
    <el-footer style="text-align: left;">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParam.pageNum"
          :page-sizes="[10,20,30,40,50,100,200,500,1000]"
          :page-size="queryParam.pageSize"
          :layout="queryParam.isCount ? 'total, sizes, prev, pager, next, jumper' : 'sizes, prev, next'"
          :total="result.totalNum">
      </el-pagination>
    </el-footer>
  </div>
</template>

<script>

import {exportExcel, getUserList,} from "@/api";

export default {
  name: "admUserInformation",
  data() {
    return {
      pageIndex: 1,
      listLoading: false,
      queryParam: {
        pageNum: 1,
        pageSize: 10,
        isCount: false,
        userType: 1,
      },
      result: {
        list: [],
        totalNum: -1
      },
    }
  },
  methods: {
    headClass() {
      return "text-align:center"
    },
    rowClass() {
      return "text-align:center"
    },
    handleSizeChange(val) {
      this.queryParam.pageSize = val
      this.queryUsers()
    },
    handleCurrentChange(val) {
      this.queryParam.pageNum = val
      this.queryUsers()
    },
    dateFormat(it) {
      let date = new Date(it * 1000)
      return (
          date.getFullYear() +
          '年' +
          (date.getMonth() + 1) +
          '月' +
          date.getDate() +
          '日'
      );
    },
    queryUsers() {
      this.listLoading = true
      getUserList(this.queryParam).then(res => {
        this.result.list = res.data.list
        this.result.totalNum = res.data.totalNum
        this.listLoading = false
      })
    },
    exportUsers(item) {
      exportExcel(item).then(res => {
        window.location.href = window.URL.createObjectURL(res.data)
      })

    },
    changePageIndex(index) {
      if (index === 1) {
        this.pageIndex = 1
        this.queryParam.userType = 1
        this.queryUsers()
      } else if (index === 2) {
        this.pageIndex = 2
        this.queryParam.userType = 2
        this.queryUsers()
      }
    }
  },
  mounted() {
    window.app = this;
  },
  created() {
    this.queryUsers()
  }
}
</script>

<style scoped>


</style>